<{include file="top.html"}>
<link rel="stylesheet" href="<{$preStaticUrl}>Wap/v2/css/mui.picker.min.css?v=<{$resVersion}>" />
<script src="<{$preStaticUrl}>Wap/v2/js/mui.js"></script>
<script src="<{$preStaticUrl}>Wap/v2/js/mui.picker.min.js"></script>
<style>
    #tmp{display:none}
    .rmbtn{
        color:#fe0090;
        float: right;
        margin-right: 1em;
    }

    .mui-backdrop {
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .mui-dtpicker-title {
        display: none;
    }
    .mui-poppicker-header, .mui-dtpicker-header {
        padding: 0.27rem 0.3rem;
        background: #fff;
    }
    .mui-poppicker-header .mui-btn, .mui-dtpicker-header .mui-btn {
        padding: 0;
        background: none;
        border: 0;
        font-size: 1.6rem;
        color: #ff5685;
    }

    .mui-picker {
        background: #f4f4f4;
    }

    .mui-pciker-rule-ft {
        border: 0;
        background: #E5E5E5;
        z-index: 1;
    }
</style>
</head>
<body>
<div class="xy-panel">
    <div class="xy-panel-top">
        <div class="xy-titlebar">
            <div class="xy-titlebar-title" style="margin: 0 auto"><{$title}></div>
            <div class="xy-titlebar-right"></div>
        </div>
    </div>
    <div class="xy-panel-content" style="bottom:0;padding:1rem 0;top:4rem">
        <div class="xy-row vDirectionRow">
            <form id="tab_mo_2" >
                <dl class="Annotate">注：加*号为必填项</dl>
                <ul class="con_ui-list integrate_ui-list">
                    <li class="ui-list">
                        <i>家长姓名：</i>
                        <span><input type="text" name="realname" placeholder="请输入家长姓名" value="<{$babyInfo['parentName']}>"/></span>
                    </li>
                    <li class="ui-list">
                        <i><span style="color:red">*</span>联系电话：</i>
                        <span><input type="tel" name="phone" placeholder="请输入联系电话" value="<{$babyInfo['phone']}>" required/></span>
                    </li>
                </ul>
                <ul class="con_ui-list integrate_ui-list">
                    <li class="ui-list">
                        <i class="address-icon">详细地址：</i>
                    </li>
                    <li class="address_Newbox">
                        <i class="addressArea"><textarea name="address" placeholder="快递可以配送到的地址"><{$babyInfo['address']}></textarea></i>
                    </li>
                </ul>
                <dl class="Annotate">宝贝信息</dl>
                <ul class="con_ui-list integrate_ui-list">
                    <li class="ui-list">
                        <i><span style="color:red">*</span>宝贝昵称：</i>
                        <span><input type="text" name="nickname[]" placeholder="请输入宝贝昵称" value="<{$babyInfo['babyName1']}>" required/></span>
                    </li>
                    <li class="ui-list">
                        <i>宝贝性别：</i>
                        <span><input type="text" readonly class="sex" name="sex[]" placeholder="男/女" value="<{$babyInfo['babySex1']}>"/></span>
                    </li>
                    <li class="ui-list">
                        <i><span style="color:red">*</span>宝贝生日：</i>
                        <span><input class="date" type="text" readonly name="birthday[]" placeholder="YYYY-MM-DD" value="<{$babyInfo['babyBirthday1']}>"/></span>
                    </li>
                </ul>
                <{if $babyInfo['babyName2']}>
                <dl class="Annotate">宝贝信息   <a class="rmbtn" onclick="remove(this)">移除</a></dl>
                <ul class="con_ui-list integrate_ui-list">
                    <li class="ui-list">
                        <i><span style="color:red">*</span>宝贝昵称：</i>
                        <span><input type="text" name="nickname[]" placeholder="请输入宝贝昵称" value="<{$babyInfo['babyName2']}>" required/></span>
                    </li>
                    <li class="ui-list">
                        <i>宝贝性别：</i>
                        <span><input type="text" readonly class="sex" name="sex[]" placeholder="男/女" value="<{$babyInfo['babySex2']}>"/></span>
                    </li>
                    <li class="ui-list">
                        <i><span style="color:red">*</span>宝贝生日：</i>
                        <span><input class="date" type="text" readonly name="birthday[]" placeholder="YYYY-MM-DD" value="<{$babyInfo['babyBirthday2']}>"/></span>
                    </li>
                </ul>

                    <{if $babyInfo['babyName3']}>
                    <dl class="Annotate">宝贝信息   <a class="rmbtn" onclick="remove(this)">移除</a></dl>
                    <ul class="con_ui-list integrate_ui-list">
                        <li class="ui-list">
                            <i><span style="color:red">*</span>宝贝昵称：</i>
                            <span><input type="text" name="nickname[]" placeholder="请输入宝贝昵称" value="<{$babyInfo['babyName3']}>" required/></span>
                        </li>
                        <li class="ui-list">
                            <i>宝贝性别：</i>
                            <span><input type="text" readonly class="sex" name="sex[]" placeholder="男/女" value="<{$babyInfo['babySex3']}>"/></span>
                        </li>
                        <li class="ui-list">
                            <i><span style="color:red">*</span>宝贝生日：</i>
                            <span><input class="date" type="text" readonly name="birthday[]" placeholder="YYYY-MM-DD" value="<{$babyInfo['babyBirthday3']}>"/></span>
                        </li>
                    </ul>
                    <{/if}>
                <{/if}>

                <{if !$babyInfo}>
                <div class="ui-button ui-button-2">
                    <a href="javascript:void(0);" onclick="moreBaby()">增加宝贝</a><br />
                    <a href="javascript:void(0);" onclick="submitInfo()">提交信息</a>
                </div>
                <{/if}>

            </form>

        </div>
    </div>
</div>

<div id="tmp" >
    <dl class="Annotate">宝贝信息   <a class="rmbtn" onclick="remove(this)">移除</a></dl>
    <ul class="con_ui-list integrate_ui-list">
        <li class="ui-list">
            <i><span style="color:red">*</span>宝贝昵称：</i>
            <span><input type="text" name="nickname[]" placeholder="请输入宝贝昵称" value="" required/></span>
        </li>
        <li class="ui-list">
            <i>宝贝性别：</i>
            <span><input type="text" readonly class="sex" name="sex[]" placeholder="男/女" value=""/></span>
        </li>
        <li class="ui-list">
            <i><span style="color:red">*</span>宝贝生日：</i>
            <span><input class="date" type="text" readonly name="birthday[]" placeholder="YYYY-MM-DD" value=""/></span>
        </li>
    </ul>
</div>
</body>
</html>

<script>
    $(document).ready(function(){
        $(".date").click(bindDate);
        $(".sex").click(bindSex);


    });

    function moreBaby(){
        var num=$('.integrate_ui-list').length
        if(num>=6){
            layer.msg("至多可加提交三位宝宝信息");
            return;
        }
        var newElement=$('#tmp').clone().removeAttr('id').insertBefore('.ui-button-2').show();
        newElement.find('.date').click(bindDate);
        newElement.find('.sex').click(bindSex);

    }

    function remove(obj){
        var $obj=$(obj).parent();
        $obj.next().remove();
        $obj.remove();
    }


    function submitInfo(){
        var param = $("#tab_mo_2").serialize();
        $.post('',param,function(res){
            layer.msg(res.msg);
        });
    }


    var sexPicker=new mui.PopPicker();
    sexPicker.setData([{value:1,text:'男'},{value:0,text:'女'}]);

    function bindSex(){
        var _self = this;
        sexPicker.show(function (rs) {
            console.log(rs)
                $(_self).val(rs[0].text)
            });

    }


    function bindDate(){
        var _self = this;
        var birthValue = $(_self).val();
        if(_self.picker) {
            _self.picker.show(function (rs) {
                $(_self).val(rs.value)
                $(_self).text(rs.y.value+"-"+parseInt(rs.m.value)+"-"+parseInt(rs.d.value))
                _self.picker.dispose();
                _self.picker = null;
            });
        } else {
            var type,beginDate,endDate;
            type='date';
            beginDate=new Date(2000, 01, 01);
            endDate=new Date();


            _self.picker = new mui.DtPicker({
                type: type,
                value: birthValue,
                beginDate: beginDate,
                endDate: endDate
            })
            _self.picker.show(function(rs) {
                $(_self).val(rs.value)
                $(_self).text(rs.y.value+"-"+parseInt(rs.m.value)+"-"+parseInt(rs.d.value))
                _self.picker.dispose();
                _self.picker = null;
            });
        }
    }

</script>